<template>
  <div class="win">
    <div class="order_detail">
      <div class="list">
        <p class="title">订单状态:</p>
        <p class="status">{{orderDetail.status}}</p>
      </div>
      <div class="list">
        <p class="title">发货状态:</p>
        <p class="status">{{orderDetail.delivery_status }}</p>
      </div>
      <div class="list" v-if="orderDetail.logistic_name!=null">
        <p class="title">托运物流:</p>
        <p class="status">{{orderDetail.logistic_name}}</p>
      </div>
      <div class="list" v-if="orderDetail.type==1">
        <p class="title">订单金额:</p>
        <p class="status">￥{{orderDetail.total_price}}</p>
      </div>
      <div class="list" v-if="orderDetail.money!=0&&orderDetail.money!=null&&orderDetail.type==1">
        <p class="title">优惠金额:</p>
        <p class="status">￥{{orderDetail.money}}</p>
      </div>
      <div class="list">
        <p class="title">实际支付:</p>
        <p class="status" v-if="orderDetail.type==1">￥{{orderDetail.pay_price}}</p>
        <p class="status" v-else>{{orderDetail.total_integral}}积分</p>
      </div>
      <div class="list" v-if="orderDetail.pay_time!=null">
        <p class="title">付款时间:</p>
        <p class="status">{{orderDetail.pay_time}}</p>
      </div>
      <div class="list">
        <p class="title">订单编号:</p>
        <p class="status">{{orderDetail.order_number}}</p>
      </div>
    </div>
    <div class="goods_box">
      <div class="item" v-for="(item,index) in orderDetail.pro" :key="index">
        <img v-if="item.present==1" class="present_img" src="/static/img/zengsong.png" alt />
        <div class="item_top_left">
          <img :src="item.image" class="img_src" />
        </div>
        <div class="item_top_right">
          <p class="name ellipsis2">{{item.name}}</p>
          <div class="tips_box">
            <p
              v-if="l<2"
              :class="ite=='包邮'?'blue':'green'"
              v-for="(ite, l) in item.label"
              :key="l"
            >{{ite}}</p>
          </div>
          <div class="money_box">
            <p class="money" v-if="orderDetail.type==1">
              ￥
              <span>{{item.sale_price}}</span>
            </p>
            <p class="money" v-else>
              <span>{{item.sale_price}}积分</span>
            </p>
            <p class="sales">数量：{{item.num}}</p>
          </div>
        </div>
      </div>
    </div>
    <i-toast id="toast" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      bjurl: "",
      orderDetail: [], //订单详情数据
      goodsData: [], //商品数据
      order_id: 0 //订单ID
    };
  },
  methods: {
    // 请求接口订单详情
    getOrderDetail() {
      this.$ajax("/home/order/getOrderDetail", "post", {
        order_id: this.order_id
      })
        .then(res => {
          
          if (res.status) {
            this.orderDetail = res.data;
          } else {
          }
        })
        .catch(err => {});
    }
  },
  onLoad(e) {
    Object.assign(this.$data, this.$options.data());
    this.bjurl = this.$bjurl;
    this.order_id = e.order_id;
    this.getOrderDetail();
  }
};
</script>

<style lang="scss" scoped>
.win {
  .order_detail {
    .list {
      background-color: #ffffff;
      box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(240, 240, 240, 1);
      width: 750rpx;
      height: 90rpx;
      padding: 0 30rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #4d4d4d;
      font-size: 28rpx;
    }
  }
  .goods_box {
    .item {
      font-weight: 500;
      margin-top: 20rpx;
      display: flex;
      box-sizing: border-box;
      overflow: hidden;
      position: relative;
      background-color: #ffffff;
      width: 750rpx;
      padding: 15rpx 0;
      box-shadow: -1rpx 7rpx 8rpx 0rpx rgba(169, 169, 169, 0.14);
      .present_img {
        width: 38rpx;
        height: 38rpx;
        position: absolute;
        right: 20rpx;
        top: 20rpx;
      }
      .item_top_left {
        padding-left: 15rpx;
      }
      .img_src {
        width: 198rpx;
        height: 198rpx;
        border-radius: 10rpx;
      }
      .item_top_right {
        flex: 1;
        box-sizing: border-box;
        position: relative;
        padding: 10rpx 15rpx 0 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .name {
          font-size: 30rpx;
          width: 430rpx;
        }
        .tips_box {
          display: flex;
          p {
            padding: 6rpx 10rpx 7rpx;
            font-size: 21rpx;
            border-radius: 20rpx;
            margin-right: 10rpx;
          }
          .blue {
            color: #6da9ff;
            background-color: #deebff;
            border-radius: 15rpx;
            margin-right: 10rpx;
          }
          .green {
            color: #ffffff;
            background-color: $green;
          }
        }
        .money_box {
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          padding-right: 20rpx;
          .money {
            color: $red;
            line-height: 0.9;
            font-size: 36rpx;
            span {
              font-size: 36rpx;
            }
          }
          .sales {
            font-size: 26rpx;
            color: #4d4d4d;
          }
        }
      }
    }
  }
}
</style>
